<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>咸鱼之王辅助分析</title>
    <!-- 引入Vue 3 -->
    <script src="./js/vue.global.prod.js"></script>
    <!-- 引入Element Plus -->
    <link
            rel="stylesheet"
            href="./css/element-plus-index.css"
    />
    <script src="./js/element-plus.js"></script>
    <script src="./js/icons-vue.js"></script>

    <!-- 引入 Monaco Editor -->
    <script src="./js/monaco-editor-loader.js"></script>

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app">
    <el-container class="main-container">
        <!-- 头部 -->
        <el-header height="auto" class="app-header">
            <div class="header-content">
                <h1 class="app-title">咸鱼之王辅助分析</h1>
                <div class="connection-status">
                    <el-tag :type="connectionStatusType" size="small" effect="dark">
                        <el-icon v-if="isConnected">
                            <Check/>
                        </el-icon>
                        <el-icon v-else-if="connectionError">
                            <WarningFilled/>
                        </el-icon>
                        <el-icon v-else>
                            <Close/>
                        </el-icon>
                        {{ connectionStatusText }}
                    </el-tag>
                    <el-button-group class="control-buttons">
                        <el-button type="primary" size="small" @click="reconnect" :loading="connecting">
                            <el-icon>
                                <Refresh/>
                            </el-icon>
                            {{ connectionButtonText }}
                        </el-button>
                        <el-button type="danger" size="small" @click="clearMessages">
                            <el-icon>
                                <Delete/>
                            </el-icon>
                            清空消息
                        </el-button>
                        <!-- 添加查看脚本日志按钮 -->
                        <el-button type="warning" size="small" @click="toggleScriptLog">
                            <el-icon>
                                <Document/>
                            </el-icon>
                            脚本日志
                        </el-button>
                    </el-button-group>
                </div>
            </div>
        </el-header>

        <!-- 主体内容 -->
        <el-container class="content-container">
            <!-- 左侧消息列表 -->
            <el-aside width="40%" class="message-container" >
                <div class="filter-container">
                    <el-form :inline="true" size="small">
                        <el-form-item label="方向">
                            <el-select v-model="filterDirection" placeholder="消息方向">
                                <el-option label="全部" value="all"></el-option>
                                <el-option label="发送" value="client"></el-option>
                                <el-option label="接收" value="server"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="命令">
                            <el-input v-model="filterCmd" placeholder="命令名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="resetFilters">
                                <el-icon>
                                    <Refresh/>
                                </el-icon>
                                重置
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" @click="openScriptManager">
                                <el-icon><Document /></el-icon>
                                脚本管理
                            </el-button>
                        </el-form-item>
                        <!-- 优化排除命令管理下拉菜单 -->
                        <!-- 优化排除命令管理下拉菜单 -->
                        <el-form-item v-if="excludedCommands.length > 0">
                            <el-popover
                                    placement="bottom"
                                    :width="300"
                                    trigger="click"
                                    popper-class="excluded-commands-popover"
                            >
                                <template #reference>
                                    <el-button type="warning">
                                        <el-icon><Warning/></el-icon>
                                          排除（{{ excludedCommands.length }}）
                                    </el-button>
                                </template>

                                <div class="excluded-commands-container">
                                    <div class="excluded-commands-header">
                                        <span>已排除的命令</span>
                                        <el-button type="primary" size="small" @click="clearAllExcludes" class="restore-all-btn">
                                            全部恢复
                                        </el-button>
                                    </div>
                                    <el-scrollbar max-height="300px">
                                        <div class="excluded-commands-list">
                                            <div v-for="cmd in excludedCommands" :key="cmd" class="excluded-command-item">
                                                <span class="excluded-command-name">{{ cmd }}</span>
                                                <el-button
                                                        type="primary"
                                                        size="small"
                                                        @click="includeCommand(cmd)"
                                                        class="restore-btn"
                                                >
                                                    <el-icon><Refresh-Right/></el-icon>
                                                    恢复
                                                </el-button>
                                            </div>
                                            <el-empty v-if="excludedCommands.length === 0" description="没有排除的命令"></el-empty>
                                        </div>
                                    </el-scrollbar>
                                </div>
                            </el-popover>
                        </el-form-item>
                    </el-form>
                </div>
                <el-scrollbar height="calc(100% - 70px)">
                    <div class="message-list">
                        <el-empty v-if="filteredMessages.length === 0" description="暂无消息"></el-empty>
                        <div
                                v-for="(message, index) in filteredMessages"
                                :key="index"
                                class="message-item"
                                :class="{ 'is-expanded': message.expanded }"
                                @click="toggleExpand(message)"
                        >

                            <!-- 修改消息头部，直接显示备注内容 -->
                            <div class="message-header">
                                <div :class="['message-direction', message.call === 'client' ? 'send' : 'receive']">
                                    {{ getCurrentTime(message.timestamp) }}
                                    {{ message.call === 'client' ? 'Send:' : 'Receive:' }}
                                    <span class="cmd-text">{{ message.parsedMsg.cmd }}</span>
                                    <span v-if="hasCommandNote(message.parsedMsg.cmd)" class="note-tag" @click.stop="openCommandNoteDialog(message)">
            <el-tooltip :content="'点击编辑备注'" placement="top">
                <span class="note-content">{{ getCommandNote(message.parsedMsg.cmd) }}</span>
            </el-tooltip>
        </span>
                                    <span v-else class="add-note-btn" @click.stop="openCommandNoteDialog(message)">
            <el-tooltip content="添加命令备注" placement="top">
                <el-icon><Edit/></el-icon>
            </el-tooltip>
        </span>
                                </div>
                                <!-- 在消息操作区域添加排除按钮 -->
                                <!-- 添加取消排除按钮 -->
                                <!-- 修改消息操作区域，只保留排除按钮 -->
                                <div class="message-actions">
                                    <el-button
                                            type="primary"
                                            size="small"
                                            text
                                            @click.stop="viewMessageDetail(message)"
                                    >
                                        {{ message.call === 'client' ? '调试' : '查看' }}
                                        <el-icon><Search/></el-icon>
                                    </el-button>
                                    <el-button
                                            type="danger"
                                            size="small"
                                            text
                                            @click.stop="excludeCommand(message.parsedMsg.cmd)"
                                            title="排除此类消息"
                                    >排除
                                        <el-icon><Delete/></el-icon>
                                    </el-button>
                                </div>
                            </div>

                            <!-- 在消息内容中添加键备注功能 -->
                            <div v-show="message.expanded" class="message-content">
                                <pre>{{ formatJson(message.parsedMsg) }}</pre>
                            </div>


                        </div>
                    </div>
                </el-scrollbar>
            </el-aside>


            <!-- 右侧JSON详情 -->
            <el-main class="json-detail">
                <el-tabs v-model="activeTab" class="json-tabs">
                    <el-tab-pane label="详情" name="detail">
                        <div class="json-header">
                            <span class="json-title">{{ jsonTitle }}</span>
                            <div class="json-actions">
                                <el-button
                                        type="primary"
                                        size="small"
                                        text
                                        :disabled="!currentJson"
                                        @click="copyJson"
                                >
                                    <el-icon>
                                        <DocumentCopy/>
                                    </el-icon>
                                    复制
                                </el-button>
                            </div>
                        </div>
                        <!-- 修改JSON详情视图 -->
                        <el-scrollbar height="calc(100% - 40px)" class="json-content">
                            <pre v-if="currentJson" class="json-with-notes"></pre>
                            <el-empty v-else description="选择消息查看详情"></el-empty>
                        </el-scrollbar>
                    </el-tab-pane>

                    <el-tab-pane label="调试" name="debug">
                        <div class="debug-container">
                            <div class="debug-header">
                                <span class="debug-title">调试发送:{{ jsonTitle }}</span>
                            </div>
                            <div class="debug-content">
                                <el-form>
                                    <el-form-item>
                                        <el-input
                                                v-model="debugContent"
                                                type="textarea"
                                                :rows="10"
                                                placeholder="请输入要发送的JSON内容"
                                                resize="none"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="sendDebugMessage" >
                                            <el-icon><Position/></el-icon>
                                            发送
                                        </el-button>
                                        <el-button @click="formatDebugContent">
                                            <el-icon><Magic-Stick/></el-icon>
                                            格式化
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
    <!-- 添加备注对话框 - 添加note-dialog类 -->
    <el-dialog
            v-model="noteDialogVisible"
            :title="currentEditingNote && currentEditingNote.type === 'command' ? '命令备注' : '键备注'"
            width="30%"
            custom-class="note-dialog"
            :close-on-click-modal="false"
    >
        <el-form>
            <el-form-item>
                <el-input
                        v-model="noteContent"
                        type="textarea"
                        :rows="5"
                        placeholder="请输入备注内容"
                        resize="none"
                        autofocus
                ></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="noteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveNote">保存</el-button>
        </span>
        </template>
    </el-dialog>
    <el-dialog
            v-model="scriptManagerVisible"
            title="脚本管理"
            width="70%"
            :close-on-click-modal="false"
            custom-class="script-dialog"
    >
        <div class="script-manager-container">
            <div class="script-list-header">
                <el-button type="primary" @click="createNewScript">
                    <el-icon><Plus /></el-icon>
                    新建脚本
                </el-button>
            </div>

            <el-table :data="scripts" style="width: 100%" v-loading="scriptsLoading">
                <el-table-column prop="name" label="脚本名称" min-width="150">
                    <template #default="scope">
                        <div class="script-name-container">
                            <el-input
                                    v-if="scope.row.nameEditing"
                                    v-model="scope.row.name"
                                    placeholder="请输入脚本名称"
                                    size="small"
                                    @blur="finishEditName(scope.row)"
                                    @keyup.enter="finishEditName(scope.row)"
                                    ref="nameInput"
                            ></el-input>
                            <div v-else class="script-name-display" @click="startEditName(scope.row, $event)">
                                <span>{{ scope.row.name }}</span>
                                <el-icon class="edit-name-icon"><Edit /></el-icon>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="enabled" label="状态" width="100">
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row.enabled"
                                :disabled="scope.row.editing"
                                @change="toggleScriptStatus(scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>

                <el-table-column prop="createdAt" label="创建时间" width="180">
                    <template #default="scope">
                        {{ formatDate(scope.row.createdAt) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <div v-if="scope.row.editing">
                            <el-button type="primary" size="small" @click="saveScript(scope.row)">
                                保存
                            </el-button>
                            <el-button size="small" @click="cancelEdit(scope.row)">
                                取消
                            </el-button>
                        </div>
                        <div v-else>
                            <el-button type="primary" size="small" @click="editScript(scope.row)">
                                编辑
                            </el-button>
                            <el-button type="danger" size="small" @click="deleteScript(scope.row)">
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <!-- 脚本编辑对话框 -->
        <el-dialog
                v-model="scriptEditVisible"
                title="编辑脚本内容"
                width="80%"
                append-to-body
                :close-on-click-modal="false"
                :destroy-on-close="false"
        >
            <div class="script-editor-container" v-if="currentScript">
                <el-tabs v-model="scriptEditActiveTab" class="script-edit-tabs">
                    <el-tab-pane label="脚本编辑" name="editor">
                        <div class="monaco-editor-container" id="monaco-editor"></div>
                    </el-tab-pane>
                    <el-tab-pane label="使用说明" name="help">
                        <div class="script-help-container">
                            <el-card class="script-help-card">
                                <template #header>
                                    <div class="script-help-header">
                                        <span>脚本编写指南</span>
                                    </div>
                                </template>
                                <div class="script-help-content">
                                    <h3>基本用法</h3>
                                    <p>脚本将在接收到服务器消息时自动执行。您可以定义一个 <code>process(messageData)</code> 函数来处理消息数据。</p>

                                    <h3>可用工具函数</h3>
                                    <ul>
                                        <li><code>log(message)</code>: 输出日志到控制台</li>
                                        <li><code>notify(message, type)</code>: 发送通知，type 可以是 'info', 'success', 'warning', 'error'</li>
                                    </ul>

                                    <h3>示例代码</h3>
                                    <pre class="script-example-code">
// 定义一个处理函数，接收消息数据作为参数
function process(messageData) {
    // 获取消息命令
    const cmd = messageData.cmd;

    // 根据不同的命令执行不同的操作
    if (cmd === '某个特定命令') {
        // 处理特定命令的逻辑
        log('收到特定命令: ' + cmd);

        // 可以访问消息的所有字段
        if (messageData.data && messageData.data.someField) {
            notify('发现特定字段: ' + messageData.data.someField, 'success');
        }

        // 返回处理结果（可选）
        return '处理完成';
    }

    // 可以处理所有类型的消息
    log('收到消息: ' + cmd);
}
                            </pre>

                                    <h3>高级用法</h3>
                                    <p>您可以在脚本中定义多个函数，但只有 <code>process</code> 函数会被自动调用。</p>
                                    <p>脚本执行环境是安全的沙箱，无法直接访问页面 DOM，但可以通过 <code>notify</code> 函数与用户交互。</p>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancelScriptEdit">取消</el-button>
            <el-button type="primary" @click="saveScriptContent">保存</el-button>
            <el-button type="success" @click="formatScriptCode">
                <el-icon><Magic /></el-icon>
                格式化代码
            </el-button>
        </span>
            </template>
        </el-dialog>
    </el-dialog>
    <div v-if="scriptLogVisible" class="script-log-window" :style="{ top: scriptLogPosition.y + 'px', left: scriptLogPosition.x + 'px' }">
        <div class="script-log-header" @mousedown="startDragScriptLog">
            <span class="script-log-title">脚本日志</span>
            <div class="script-log-actions">
                <!-- 添加脚本筛选下拉框 -->
                <el-select
                        v-model="scriptLogFilter"
                        placeholder="全部脚本"
                        size="small"
                        style="width: 120px; margin-right: 5px;"
                        @click.stop
                >
                    <el-option label="全部脚本" value=""></el-option>
                    <el-option
                            v-for="name in scriptNames"
                            :key="name"
                            :label="name"
                            :value="name"
                    ></el-option>
                </el-select>
                <el-button type="primary" size="small" text @click="clearScriptLogs">
                    <el-icon><Delete/></el-icon>
                </el-button>
                <el-button type="primary" size="small" text @click="minimizeScriptLog">
                    <el-icon v-if="scriptLogMinimized"><Arrow-Up/></el-icon>
                    <el-icon v-else><Arrow-Down/></el-icon>
                </el-button>
                <el-button type="danger" size="small" text @click="closeScriptLog">
                    <el-icon><Close/></el-icon>
                </el-button>
            </div>
        </div>
        <div v-show="!scriptLogMinimized" class="script-log-content">
            <el-scrollbar height="100%" ref="scriptLogScrollbar">
                <div class="script-log-entries">
                    <div v-for="(log, index) in filteredScriptLogs" :key="index" class="script-log-entry" :class="'log-level-' + log.level">
                        <span class="script-log-time">{{ formatLogTime(log.timestamp) }}</span>
                        <span class="script-log-script">[{{ log.script }}]</span>
                        <span class="script-log-message">{{ log.message }}</span>
                    </div>
                    <el-empty v-if="filteredScriptLogs.length === 0" description="暂无日志"></el-empty>
                </div>
            </el-scrollbar>
        </div>
    </div>
</div>

<script src="js/app.js"></script>
</body>
</html>